import { useEffect, useMemo, useState } from 'react';
import { Button, Popconfirm, Space, Table, Typography, Notification } from '@douyinfe/semi-ui';
import { IconAlertTriangle, IconDeleteStroked, IconEditStroked } from '@douyinfe/semi-icons';
import { ColumnProps } from '@douyinfe/semi-ui/lib/es/table';
import { PaginationProps } from '@douyinfe/semi-ui/lib/es/pagination';
import { usePageContext, useStoreContext } from '../dictionary-context';
import TablePagination, { onPageParamsChange } from '@/widgets/table-pagination';
import { pageSizeOpts } from '../dictionary-helper';
import BaseColumns from './dictionary-columns';
import { fetchItems } from '../reducer/dictionary-actions';
import { deleteItem } from '../reducer/dictionary-api';

const DictionaryTable = () => {
  const { Text } = Typography;

  const PageContext = usePageContext();
  const {
    state: { dictionary },
    useDispatch,
  } = useStoreContext();
  const PageAction = useMemo(() => {
    return {
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
      addRecord: PageContext.addRecord,
      editRecord: PageContext.editRecord,
      delRecord: PageContext.delRecord,
      detailRecord: PageContext.detailRecord,
    };
  }, [PageContext]);

  const { entities, totalCount, key } = dictionary;

  console.log('dictionary', dictionary);

  const columns: ColumnProps[] = [
    {
      title: '序号',
      dataIndex: 'id',
      // sorterKey: 'id',
      // sorter: true,
      width: 100,
      fixed: true,
      align: 'center',
      render: (_, __, index) => (
        <>{(PageAction.queryParams.pageNum - 1) * PageAction.queryParams.pageSize + index + 1}</>
      ),
    },
    ...BaseColumns,
    {
      title: '',
      dataIndex: 'action',
      render: (text, record, index) => {
        return (
          <Space>
            <Button
              icon={<IconEditStroked />}
              onClick={() => {
                PageAction.editRecord(record[key]);
              }}
            ></Button>
            <Popconfirm
              title="请注意"
              content="是否删除?"
              icon={<IconAlertTriangle className="!text-red-500" size="extra-large" />}
              okType="danger"
              onConfirm={async () => {
                const result = await useDispatch(deleteItem, record[key]);
                if (result) {
                  useDispatch(fetchItems, PageAction.queryParams);
                }
              }}
            >
              <span className="inline-block invisible group-hover/item:visible">
                <Button icon={<IconDeleteStroked />} type="danger" />
              </span>
            </Popconfirm>
          </Space>
        );
      },
      // // 此处从render的第四个形参中解构出 展开按钮、选择按钮、文本等内容
      // render: (text, record, index, { expandIcon, selection, indentText }) => {
      //   return <>111</>;
      // })
    },
  ];

  const onRowEvent: any = useMemo(
    () => (record: any, index: number) => {
      return {
        className: 'group/item',
      };
    },
    []
  );

  const paginationOptions = useMemo(
    () => ({
      total: totalCount,
      queryParams: PageAction.queryParams,
      pageSizeOpts,
    }),
    [PageAction, dictionary]
  );

  return (
    <TablePagination paginationOpts={paginationOptions}>
      {(paginationOpts: PaginationProps) => (
        <Table
          size="small"
          columns={columns}
          dataSource={entities}
          onChange={(params: any) => onPageParamsChange(params, PageAction.setQueryParams)}
          pagination={paginationOpts}
          onRow={onRowEvent}
          bordered={false}
        />
      )}
    </TablePagination>
  );
};

export default DictionaryTable;
